<template>
    <div class="category-page">
        <h1>文章分类</h1>
        <div class="category-list">
            <div class="category-card" v-for="cat in categories" :key="cat.name">
                <div class="cat-icon"><i :class="cat.icon"></i></div>
                <div>
                    <div class="cat-title">{{ cat.name }}</div>
                    <div class="cat-desc">{{ cat.desc }}</div>
                    <div class="cat-count">{{ cat.count }} 篇文章</div>
                </div>
            </div>
        </div>
    </div>
    <div class="tags-page">
        <h1>文章标签</h1>
        <div class="tags-list">
            <el-tag v-for="tag in tags" :key="tag.name" :type="tag.type" class="tag-item" size="large">
                {{ tag.name }} <span class="tag-count">({{ tag.count }})</span>
            </el-tag>
        </div>
    </div>
</template>

<script setup>
const categories = [
    { name: '前端', desc: '前端开发相关技术', count: 8, icon: 'el-icon-monitor' },
    { name: '生活', desc: '生活随笔与感悟', count: 5, icon: 'el-icon-coffee' },
    { name: '算法', desc: '算法与数据结构', count: 3, icon: 'el-icon-s-operation' },
    { name: '成长', desc: '成长与思考', count: 2, icon: 'el-icon-user' }
]
const tags = [
    { name: 'Vue', count: 5, type: 'primary' },
    { name: '生活', count: 3, type: 'success' },
    { name: '算法', count: 2, type: 'warning' },
    { name: 'CSS', count: 2, type: 'info' },
    { name: '成长', count: 1, type: '' }
]
</script>

<style scoped>
.category-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 0;
    background: var(--el-bg-color);
    color: var(--el-text-color-primary);
}

.category-list {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.category-card {
    background: var(--el-bg-color);
    border-radius: 12px;
    box-shadow: var(--el-box-shadow-light);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 220px;
    transition: box-shadow 0.2s;
    border: 1px solid var(--el-border-color);
    color: var(--el-text-color-primary);
}

.category-card:hover {
    box-shadow: var(--el-box-shadow-dark);
}

.cat-icon {
    font-size: 2.2rem;
    color: var(--el-color-primary);
}

.cat-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--el-text-color-primary);
}

.cat-desc {
    color: var(--el-text-color-secondary);
    font-size: 0.98rem;
    margin: 4px 0;
}

.cat-count {
    color: var(--el-color-primary);
    font-size: 0.95rem;
}

.tags-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 0;
    background: var(--el-bg-color);
    color: var(--el-text-color-primary);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.tag-item {
    font-size: 1.1rem;
    padding: 8px 18px;
    background: var(--el-fill-color-light);
    color: var(--el-color-primary);
    border: 1px solid var(--el-border-color);
}

.tag-count {
    color: var(--el-text-color-secondary);
    font-size: 0.95rem;
    margin-left: 4px;
}
</style>